<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    flex-direction: column;
			    height: 100vh;
			    margin: 0 auto;
			    background-color: #000;
			}
			
			.photo-wall {
			    display: flex;
			    flex-wrap: wrap;
			    justify-content: center;
			    max-width: 800px; /* 设置最大宽度 */
			}
			
			.photo {
			    margin: 10px;
			    overflow: hidden; /* 防止溢出 */
			    transition: transform 0.3s ease; /* 添加过渡效果 */
				
			}
			
			.photo img {
			    width: 200px; /* 设置图片宽度 */
			    height: auto; /* 高度自适应 */
			    display: block;
				border: 3px solid #fff;
			}
			
			.column1 {
			    transform: rotate(-15deg); /* 第一列旋转-15° */
			}
			
			.column2 {
			    transform: rotate(30deg); /* 第二列旋转30° */
			}
			
			.column3 {
			    transform: rotate(15deg); /* 第三列旋转15° */
			}
			
			/* 鼠标悬停时放大 */
			.photo:hover {
			    transform: scale(1.2);
			}
		</style>
	</head>
	<body>
		<div class="photo-wall">
		        <div class="photo column1">
		            <img src="./6-1-1.jpg" alt="宠物1">
		        </div>
		        <div class="photo column2">
		            <img src="./6-1-2.jpg" alt="宠物2">
		        </div>
		        <div class="photo column3">
		            <img src="./6-1-3.jpg" alt="宠物3">
		        </div>
		        <div class="photo column1">
		            <img src="./6-1-4.jpg" alt="宠物4">
		        </div>
		        <div class="photo column2">
		            <img src="./6-1-5.jpg" alt="宠物5">
		        </div>
		        <div class="photo column3">
		            <img src="./6-1-6.jpg" alt="宠物6">
		        </div>
		    </div>
	</body>
</html>